import {useLayoutEffect, useState} from 'react'

async function queryData() {
    const data =await new Promise((resolve) => {
        setTimeout(()=>{
            resolve(100)
        },2000)
    })
    return data
}

function App2(){
    const [num,setNum]= useState(1)
    //当num变更时，浏览器会在那个useLayoutEffect中的effect函数执行完毕再渲染
    //effect会阻塞很久，超过500ms会导致掉帧
    useLayoutEffect(()=>{
        queryData().then(data =>{
            setNum(data)
        })
    },[num])
    return (
        <div>
            <button onClick={()=>setNum(num+1)}>{num}</button>
        </div>
    )
}
export default App2